<template>
	<div class="share">
		<!-- 头部 -->
		<van-nav-bar
			title="图片分享"
			fixed
			safe-area-inset-top
			:z-index="5"
			placeholder
			left-arrow
			left-text="返回"
			@click-left="$router.back()"
			@click-right="$router.push('/')"
		>
			<template #right>
				<van-icon name="wap-home-o" size="20" />
			</template>
		</van-nav-bar>
		<!-- tab 栏 -->
		<van-tabs
			v-model="activeIndex"
			sticky
			color="#26a2ff"
			animated
			ellipsis
			swipeable
			offset-top="3vw"
			@change="getImagesFn"
			@scroll="scrollFn"
		>
			<van-tab v-for="item in imgCategory" :key="item.id" :title="item.title">
				<van-empty v-if="!imgList.length" description="该分类下暂无内容" />
				<MyImage v-else v-for="item2 in imgList" :key="item2.id" :share="item2"></MyImage>
			</van-tab>
		</van-tabs>
		<!-- 回到顶部 -->
		<div class="top" v-show="showTop" @click="gotoTop">
			<p>Top</p>
			<van-icon name="arrow-up" />
		</div>
	</div>
</template>

<script>
import { getImgCategory, getImages } from '@/apis/index.js';
import MyImage from '@/components/MyImage.vue';
export default {
	data() {
		return {
			activeIndex: 0,
			imgCategory: [],
			imgList: [],
			showTop: false
		};
	},
	async created() {
		this.imgCategory = (await getImgCategory()).data.message;
		// console.log(this.imgCategory);
		this.getImagesFn(0);
	},
	components: {
		MyImage
	},
	methods: {
		// 图片列表
		async getImagesFn(name) {
			// 根据下标获取 id
			const id = name == 0 ? name : this.imgCategory[name].id;
			// 根据 id 获取图片
			this.imgList = (await getImages(id)).data.message;
		},
		// 回到顶部
		scrollFn(scroll) {
			this.showTop = scroll.scrollTop >= window.innerHeight ? true : false;
		},
		gotoTop() {
			window.scrollTo({ top: 0, behavior: 'smooth' });
		}
	}
};
</script>

<style scoped lang="less">
.top {
	position: fixed;
	bottom: 100px;
	right: 20px;
	font-size: 20px;
	background-color: #fff;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: #26a2ff;
}
</style>
